/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image} from 'react-native';

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
    android:
        'Double tap R on your keyboard to reload,\n' +
        'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <Text style={{ height:550 ,  alignItems: 'stretch'}}> 主要界面 </Text>
                <View style={styles.bottomTab}>
                    <View style={styles.itemTab}>
                        <Image style={styles.itemImage} source={ require('./icon/ic_wechat.png') }/>
                        <Text style={styles.itemText}>微信</Text>
                    </View>
                    <View style={styles.itemTab}>
                        <Image style={styles.itemImage} source={ require('./icon/ic_firend.png') }/>
                        <Text style={styles.itemText}>通讯录</Text>
                    </View>
                    <View style={styles.itemTab}>
                        <Image style={styles.itemImage} source={ require('./icon/ic_fir_circle.png') }/>
                        <Text style={styles.itemText}>朋友圈</Text>
                    </View>
                    <View style={styles.itemTab}>
                        <Image style={styles.itemImage} source={ require('./icon/ic_me.png') }/>
                        <Text style={styles.itemText}>我</Text>
                    </View>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        flexDirection:'column',
        backgroundColor: '#F5FCFF',
        justifyContent:'flex-end'
    },
    bottomTab: {
        flexDirection: 'row',
        alignSelf: 'flex-end',
        backgroundColor: 'slategrey'
    },
    itemTab: {
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        height:70,
        flexGrow:1
    },
    itemText: {
        marginTop:5,
        fontSize: 13,
        color: '#F5FCFF'
    },
    itemImage: {
        width: 32,
        height: 32,
    }

});
